<template>
    <div class="app-container">
        <div class="block">文章标题</div>
        <div style="margin-bottom: 15px">
            <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
        </div>

        <div class="block">文章内容</div>
        <editor
            :initialValue="form.editorText"
            ref="toastuiEditor"
            height="500px"
        />


        <div class="block">文章描述</div>
        <div style="margin-bottom: 15px">
            <el-input type="textarea" v-model="form.description" placeholder="请输入文章描述" :rows="6"></el-input>
        </div>

        <Upload uploadTitle="文章头图" v-model="form.thumb"/>

        <div class="block">选择分类</div>
        <el-select v-model="form.select" placeholder="请选择" @change="handleChange">
            <el-option
                v-for="b in blogType"
                :key="b.id"
                :label="b.name"
                :value="b.id"
            ></el-option>
        </el-select>

        <div>
            <el-button type="primary" style="margin-top: 15px" @click="editBlogHandle">确认编辑</el-button>
        </div>
    </div>
</template>

<script>
import '@toast-ui/editor/dist/toastui-editor.css'
import { Editor } from '@toast-ui/vue-editor'
import Upload from '@/components/Upload.vue'
import { getBlogType } from '@/api/blogType'
import { editBlog, findOneBlog } from '@/api/blog'

export default {
    name: 'editBlog',
    components: {
        editor: Editor,
        Upload
    },
    data() {
        return {
            form: {
                title: '',
                editorText: '',
                description: '',
                thumb: '',
                select: ''
            },
            blogType: [], // 文章分类
            imageUrl: '', // 图片在服务器的地址
            id: ''
        }
    },
    created() {
        getBlogType().then(res => {
            this.blogType = res.data
        })

        this.id = this.$route.params.id
        this.fetchData()
    },
    methods: {
        fetchData() {
            findOneBlog(this.id).then(({ data }) => {
                console.log(data)
                this.form = data
                this.form.select = data.category == null ? '' : data.category.id
                this.$refs.toastuiEditor.invoke('setHTML', data.htmlContent)
            })
        },
        editBlogHandle() {
            let html = this.$refs.toastuiEditor.invoke('getHTML')
            let markdown = this.$refs.toastuiEditor.invoke('getMarkdown')

            let obj = {
                title: this.form.title,
                description: this.form.description,
                createDate: new Date().getTime(),
                categoryId: this.form.select,
                toc: [], // 目录传空
                htmlContent: html,
                markdownContent: markdown,
                thumb: this.form.thumb
            }

            if (obj.title && obj.description && obj.categoryId && obj.htmlContent) {
                editBlog({ id: this.id, data: obj }).then(() => {
                    this.$message.success('修改成功')
                    this.$router.push('/blogList')
                })
            } else {
                this.$message.error('请填写完整')
            }
        },
        handleChange() {
            this.$forceUpdate()
        }
    }
}
</script>

<style scoped lang="scss">
.block {
    margin: 15px 0;
    font-weight: bold;
}
</style>
